import React from "react";
import styles from'./hdb-cell.module.css'
import propTypes from 'prop-types'
import {withRouter} from 'react-router-dom'

/*
*
* props:
*
*   title: string
*   label: string
*   url: string  外网地址
*   to:  object
*       {pathname:string,apiname:string}
*
*   index: number  1
*
* */

class HdbCell extends React.Component{
    static defaultProps = {
        index: undefined,
        to: null,
        url: '',
        label: ''
    };

    static propTypes = {
        title: propTypes.string.isRequired,
        index: propTypes.number,
        label: propTypes.string,
        url: propTypes.string,
        to: propTypes.shape({
            pathname: propTypes.string.isRequired,
            search: propTypes.shape({
                apiname: propTypes.string.isRequired
            })
        })
    };

    go = () => {
        let {url, to, history} = this.props;
        if (url) window.open(url,'_blank');
        else if (to) history.push({pathname: to.pathname, search: `apiname=${to.search.apiname}`})
    };

    render() {
        let {index, title, label, children} = this.props;
        return (
            <div className={styles["hdb-cell"]} onClick={this.go}>
                {
                    children
                }
                <h2>
                    {index + 1 ? <span>{index + 1}.</span> : null}
                    {title}
                </h2>
                <p>{label}</p>
            </div>
        )
    }
}
export default withRouter(HdbCell)